<template>
  <div class="home-swipe">
    <van-search v-model="value"
                placeholder="请输入搜索关键词"
                input-align="center"
                @focus="onFocus"
                @search="onSearch"/>
    <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
      <van-swipe-item v-for="item in bannerData" :key="item.id">
<!--        <img :src="item.picUrl" alt="">-->
        <van-image :src="item.picUrl" lazy-load/>
      </van-swipe-item>
    </van-swipe>
  </div>
</template>

<script>
import {Toast} from 'vant';
// import axios from 'axios'
export default {
  name: "HomeSwipe",
  data() {
    return{
      value: '',
      bannerData:[]
    };
  },
  created(){
      this.getBanner()
  },
  methods:{
    onFocus(){
      Toast("触发获得焦点事件")
    },
    onSearch(val){
      Toast(val)
    },
    getBanner(){
      this.$request('get','/recommend/banner')
          .then(res=>{
            console.log(res)
            if (res.result == 100){
              this.bannerData = res.data;
            }
          })
    }
  //   getBanner(){
  //     axios.get("/api/recommend/banner")
  //         .then(response=>{
  //           //成功
  //           console.log(response.data)
  //           let resData = response.data;
  //           if (resData.result == 100){
  //             this.bannerData = resData.data;
  //           }
  //           console.log(this.bannerData)
  //         })
  //         .catch(function (error){
  //           console.log(error)
  //         })
  //   }
  }
}
</script>

<style scoped>
/*.my-swipe .van-swipe-item img {*/
/*  width:100%*/
/*}*/
</style>